import React from "react"
import { withRouter } from "react-router-dom"
import { observer, inject } from "mobx-react"
@withRouter
@inject("PlaylistStore")
@observer
class RankList extends React.Component {
    back(props) {
        this.props.history.go(-1)
    }
    forward() {
        this.props.history.go(1)
    }
    jump(id){
        this.props.history.push(`/Discover/Playlist/ChartSong?id=${id}`)
    }
    componentDidMount() {
        this.props.PlaylistStore.get_rank()
    }
    render() {
        // console.log(this.props.PlaylistStore.rank_store)
        let arr = this.props.PlaylistStore.rank_store
        // let t =this.props.PlaylistStore.rank_store[0].tracks[0].first 
        let havetracks = []
        let notracks = []
        for (let i = 0; i < arr.length; i++) {
            if (arr[i].tracks.length) {
                havetracks.push(arr[i])
            } else {
                notracks.push(arr[i])
            }
        }

        // console.log(havetracks)
        let newArr = notracks.slice(4, 10)
        let newArr1 = notracks.slice(10, 16)
        // console.log(newArr)
        return (
            <fieldset>
                <div className="RankList">
                    <button className="RankList_btn" onClick={this.back.bind(this)}><svg t="1574037423591" className="playlist_icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="861" width="32" height="32"><path d="M766.862 1021.724c-10.24 0-20.594-3.64-28.444-10.922L228.693 538.396c-15.701-14.563-15.701-38.229 0-52.792L738.418 13.198c15.701-14.563 41.187-14.563 56.889 0 15.701 14.564 15.701 38.23 0 52.793L314.027 512l481.28 446.009c15.701 14.563 15.701 38.23 0 52.793-7.851 7.282-18.205 10.922-28.445 10.922z" p-id="862"></path></svg></button>
                    <h1>排行榜</h1>
                    <button className="RankList_btn" onClick={this.forward.bind(this)}><svg t="1574037679352" className="playlist_icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1002" width="32" height="32"><path d="M257.138 2.276c10.24 0 20.594 3.64 28.444 10.922L795.307 485.604c15.70100001 14.563 15.701 38.229 0 52.792L285.582 1010.802c-15.70100001 14.563-41.187 14.563-56.889 0-15.701-14.564-15.70100001-38.23 0-52.793L709.973 512l-481.28-446.009c-15.70100001-14.563-15.70100001-38.23 0-52.793 7.851-7.282 18.205-10.922 28.445-10.922z" fill="#333333" p-id="1003"></path></svg></button>
                </div>
                <h2 className="RankList_h2">官方榜</h2>
                {havetracks.map((item, index) => <div key={index} className="RankList_container" onClick={this.jump.bind(this,item.id)}>
                    <img src={item.coverImgUrl} alt="" className="RankList_pic" />
                    <ol className="RankList_tracks" >
                        <li><h4>{item.tracks[0].first}-<span>{item.tracks[0].second}</span></h4></li>
                        
                        <li><h4>{item.tracks[1].first}-<span>{item.tracks[1].second}</span></h4></li>
                        
                        <li><h4>{item.tracks[2].first}-<span>{item.tracks[2].second}</span></h4></li>
                        
                    </ol>
                </div>
                )}
                <h2 className="RankList_h2">推荐榜</h2>
                <div className="RankList_container1" >
                    {newArr.map((item, index) => <div key={index} className="Ranklist_container" onClick={this.jump.bind(this,item.id)}>
                        <img src={item.coverImgUrl} className="RankList_pic_rec" />
                        <p className="RankList_p">{item.name}</p>
                    </div>
                    )}
                </div>
                <h2 className="RankList_h2">全球榜</h2>
                <div className="RankList_container1">
                    {newArr1.map((item, index) => <div key={index} className="Ranklist_container" onClick={this.jump.bind(this,item.id)}>
                        <img src={item.coverImgUrl} className="RankList_pic_rec" />
                        <p className="RankList_p">{item.name}</p>
                    </div>
                    )}
                </div>

            </fieldset>
        )
    }
}
export default RankList